<template>
<div>
  <p>{{messages}}</p>
  <p>{{message}}</p>
  <p>{{doublethink}}</p>
</div>
</template>

<script>
import {computed, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";

export default {
  name: "first_day_test",
  setup(){
    const {messages, doublethink} = UserControllers()
    const message=  ref("this is a messages test")
    return {messages,message, doublethink}
  }
};

function UserControllers() {
  const data = reactive({
    messages: ref(0.1),
    doublethink: computed(()=>data.messages*2)
  })

  let timer;

  onMounted(()=>{
    timer = setInterval(()=>{
      data.messages = data.messages+0.1
    }, 1000)
  })

  onUnmounted(()=>{
    clearInterval(timer)
  })

  return toRefs(data)
}
</script>

<style scoped>

</style>
